<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@taglib uri="/struts-tags" prefix="s"%>
<script type="text/javascript" charset="utf-8" src="js/jquery.listnav.min-2.1.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.dataTables.listnav.js"></script>
<script type="text/javascript" charset="utf-8">
	$(document).ready(function() {
		var departmentId = getURLParameter("departmentId");
		var oTable = $('#team-table').dataTable({
			"sDom" : 'Zfrtp',
			"sPaginationType" : "bootstrap",
			"iDisplayLength" : 4,
			"bServerSide" : true,
			"bPaginate" : true,
			"sAjaxSource" : "teamTableAjax.action",
			"aoSearchCols": [
				null,
				null,
				null,
				null,
				{"sSearch": "Yes"}
			],
			"aoColumnDefs" : [ {
				"fnRender" : function(o, val) {
					if (o.aData[4] == "Yes") {
						return '<a href=editTeam.action?teamId=' + o.aData[5] + '&departmentId=' + departmentId + '>' + o.aData[0] + '</a>';
					} else {
						return '<a href="#" onClick=toActiveTeam(' 
								+ o.aData[5]
								+ ','
								+ departmentId
								+ ')>' 
								+ o.aData[0] 
								+ '</a>';
					}
				},
				"aTargets" : [0]
			}],
			"fnServerParams": function ( aoData ) {
		  		aoData.push( { "name": "departmentId", "value": departmentId});
			}
		});
		
		$('#check-active').click(function() {
			var other = $('#check-active:checked').val();
			if (other != undefined) {
				oTable.fnFilter("", 4, true, false);
			} else {
				oTable.fnFilter("Yes", 4, true, false);
			}
		});
	});
	
	function toActiveTeam(teamId, departmentId) {
		var r = confirm('Do you want to make this Team active?');
		if (r == true) {
			window.location.replace("activeTeam.action?teamId=" + teamId + "&departmentId=" + departmentId);
		}
	}
	
	function getURLParameter(name) {
	    return decodeURI(
	        (RegExp(name + '=' + '(.+?)(&|$)').exec(location.search)||[,null])[1]
	    );
	}
	

</script>
<style type="text/css">
.dataTables_filter {
	display: none;
}

.dataTables_paginate {
	display: inline;
}
</style>

<div class="row-fluid">
	<div class="span12">
		<div id="organisation" class="box-content box-nomargin">
			<!-- <form action="#" class='form-horizontal' method="post"> -->
				<input type="hidden" id="departmentId" name="departmentId" value='<s:property value="departmentId"/>'/>
				<div class="control-group"></div>
				<div class="control-group">
					<div id="inactive-div">
						<a href='createTeam.action?departmentId=<s:property value="departmentId"/>' class="btn btn-success">Create</a>
						<label class="checkbox"> <input type="checkbox"
							name="check-inactive" id="check-active"> Include In-active
						</label>
					</div>
					<table id="team-table" class="table table-striped table-bordered">
						<thead>
							<tr>
								<th>Team Name</th>
								<th>Address Line 1</th>
								<th>Postcode</th>
								<th>Contact</th>
								<th>Is Active?</th>
							</tr>
						</thead>
						<tbody>
						</tbody>
					</table>
				</div>
			<!-- </form> -->
		</div>
	</div>
</div>